<template>
  <div class="order-detail-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header"
               class="clearfix">
            <span>基础信息</span>
          </div>
          <div>
            订单状态<span style="margin-left:20px">{{table_data.status}}</span>
          </div>
          <div style="margin-top:20px">
            订单编号<span style="margin-left:20px">{{table_data.order_num}}</span>
          </div>
          <div style="margin-top:20px">
            下单时间<span style="margin-left:20px">{{table_data.created_at}}</span>
          </div>
          <div style="margin-top:20px">
            支付方式<span style="margin-left:20px">微信支付</span>
          </div>
          <div style="margin-top:20px">
            支付时间<span style="margin-left:20px">{{table_data.pay_at}}</span>
          </div>
        </el-card>

        <el-card class="box-card"
                 style="margin-top:20px">
          <div slot="header"
               class="clearfix">
            <span>订单商品</span>
          </div>
          <div class="goods"
               v-for="item in table_data.with_item">
            <div>
              <el-avatar shape="square"
                         :size="60"
                         :src="item.with_product_norm.head"></el-avatar>
            </div>
            <div class="c">
              <div>{{item.with_product.title}}</div>
              <div style="margin-top:10px">{{item.with_product_norm.title}}</div>
            </div>
            <div>
              <div>￥{{item.price}}</div>
              <div style="margin-top:10px">x{{item.num}}</div>
            </div>
          </div>
          <div style="margin-top:20px">
            商品总价<span style="margin-left:20px">{{table_data.order_price}}</span>
          </div>
          <div style="margin-top:20px">
            订单优惠<span style="margin-left:20px">{{table_data.coupon_price}}</span>
          </div>
          <div style="margin-top:20px">
            总{{table_data.with_item.length}}件，实付款<span style="font-size:20px;font-weight:600">￥{{table_data.actual_price}}</span>
          </div>
        </el-card>

        <el-card class="box-card"
                 style="margin-top:20px">
          <div slot="header"
               class="clearfix">
            <span>退货/售后</span>
          </div>
          <div v-for="item in table_data.with_refund">
            <div class="goods"
                 v-for="item1 in item.with_item">
              <div>
                <el-avatar shape="square"
                           :size="60"
                           :src="item1.with_product_norm.head"></el-avatar>
              </div>
              <div class="c">
                <div>{{item1.with_product.title}}</div>
                <div style="margin-top:10px">{{item1.with_product_norm.title}}</div>
              </div>
              <div>
                <div>￥{{item1.price}}</div>
                <div style="margin-top:10px">x{{item1.num}}</div>
              </div>
            </div>
            <div style="margin-top:20px">
              退款单号<span style="margin-left:20px">{{item.refund_num}}</span>
            </div>
            <div style="margin-top:20px">
              退款原因<span style="margin-left:20px">{{item.reason}}</span>
            </div>
            <div style="margin-top:20px">
              退款时间<span style="margin-left:20px">{{item.created_at}}</span>
            </div>
            <div style="margin-top:20px">
              退款状态<span style="margin-left:20px">{{item.status}}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">

        <el-card class="box-card">
          <div slot="header"
               class="clearfix">
            <span>收货信息</span>
          </div>
          <div>
            收货人<span style="margin-left:20px">{{table_data.with_address.name}} {{table_data.with_address.sex}}</span>
          </div>
          <div style="margin-top:20px">
            联系方式<span style="margin-left:20px">{{table_data.with_address.phone}}</span>
          </div>
          <div style="margin-top:20px">
            收货地址<span style="margin-left:20px">{{table_data.with_address.address}}</span>
          </div>
        </el-card>

        <el-card class="box-card"
                 style="margin-top:20px">
          <div slot="header"
               class="clearfix">
            <span>物流信息</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
    
<script>
import { getDetail } from '@/api/order'
export default {
  data () {
    return {
      id: null,
      table_data: [],
    }
  },
  created () {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.fetchData(this.$route.query.id)
    }
  },
  methods: {
    fetchData (id) {
      getDetail({ id: id }).then(response => {
        this.table_data = response.data.data
      })
    }
  }
}
</script>
    
<style lang="scss" scoped>
.order-detail-container {
  max-width: 1200px;
  padding: 30px;
  margin: 0 auto;
  .goods {
    display: flex;
    width: 100%;
    .l {
    }
    .c {
      padding-left: 10px;
      padding-right: 50px;
    }
    .r {
    }
  }
}
</style>